<template>
    <!-- 收藏 item -->
    <div class="search-item">
        <div class="top">
            <div class="top-left">
                <a :href="`/notice?guid=${data.guid}&noticetype=${data.noticetype}`" target="_bank">{{title}}</a>
                <slot name="tag"></slot>
            </div>

            <div class="top-right">
                <!-- <slot name="tag"></slot> -->
                <slot name="content"> </slot>

                <div class="time">
                    <slot name="time">{{(new Date(time)).pattern("yyyy-MM-dd HH:mm:ss") | dateFormat}}</slot>
                </div>
            </div>

        </div>

    </div>

</template>

<script>
import app from '@js/app-node';
import TOOLBAR_MIXIN from '@components/sys/item-tool-bar/mixins/index';
export default {
    mixins: [TOOLBAR_MIXIN],
    props: {
        data: {
            type: Object,
            default: () => {},
        },
        title: {
            type: String,
            default: '',
        },
        time: {
            type: [String, Number],
            default: '',
        },
        tagList: {
            type: [Array, String, Boolean],
            default: false,
        },
        tagName: {
            type: String,
            default: '',
        },
        type: {
            type: String,
            default: '',
        },
        tagType: {
            type: String,
            default: '',
        },
        icon: {
            type: String,
            default: '&#xe62b;',
        },
    },
    data() {
        return {};
    },
    filters: {
        dateFormat(time) {
            // time = '2019/08/01 09:40:00';
            if (!time) return;

            var oldtime;

            if (app.getType(time) === 'string') {
                time = time.replace(/\-/g, '/');
                oldtime = new Date(time);
            } else {
                oldtime = time;
            }

            var now = new Date(),
                delta = 0,
                oldtime_s,
                now_s;

            oldtime_s = oldtime.getTime();
            now_s = now.getTime();
            delta = now_s - oldtime_s;

            if (delta / (1000 * 60 * 60) < 1) {
                //小于1h；
                return Math.ceil(delta / (1000 * 60)) + '分钟前';
            } else if (delta / (1000 * 60 * 60 * 24) < 1) {
                //小于1天
                return Math.ceil(delta / (1000 * 60 * 60)) + '小时前';
            } else if (delta / (1000 * 60 * 60 * 24 * 7) < 1) {
                //小于7天
                return Math.ceil(delta / (1000 * 60 * 60 * 24)) + '天前';
            } else if (oldtime.getFullYear() === now.getFullYear()) {
                //同年
                return oldtime.Format('MM-dd');
            } else {
                return oldtime.Format('yyyy-MM-dd');
            }
        },
    },
    methods: {
        collectClick: function (val) {
            this.$emit('setCollect', val);
        },
    },
};
</script>

<style lang="scss" scoped>
@import '@css/var.scss';

.search-item {
    position: relative;

    .top {
        display: flex;
        justify-content: space-between;
        align-items: center;
        max-height: 40px;
        width: 100%;

        .top-left {
            flex: 1;
            font-weight: 600;
            font-size: 12px;
            // max-width: 540px;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
            // cursor: pointer;

            a {
                color: #272727;
                &:hover {
                    color: $primaryColor;
                }
            }
        }

        .time {
            display: flex;
            align-items: center;
            color: $infoColor;
            font-size: 12px;
            max-width: 80px;

            .iconfont {
                cursor: pointer;
            }
        }
        .top-right {
            display: flex;
            align-items: center;
            justify-content: flex-end;
            overflow: hidden;
        }
    }

    .tags {
        margin-top: 15px;
        display: flex;
        justify-content: flex-start;
        align-items:baseline;

        .tag-after {
            margin-left: 10px;
        }

        .el-tag {
            margin-left: 10px;

            &:first-child{
                margin-left: 0;
            }
        }
    }

    .primary {
        color: $primaryColor;
    }
}
</style>